<template>
	<view>
		<custom title="个人信息" fixed="fixed"></custom>
		<view class="flex">
			<view class="flex-content" style="">
				<view class="color-333333" style="font-size: 42rpx; line-height: 40rpx; margin-top: 40rpx">编辑个人信息</view>

				<!-- 头像 -->
				<view class="flex flex-y flex-x-y" style="margin-top: 48rpx">
					<view class="pr" style="height: 164rpx; width: 164rpx"
						@tap.stop="choose_image('WRITE_EXTERNAL_STORAGE')">
						<qq-image @click="choose_image('CAMERA')" :url="form.avatarUrl || '../../static/my/avatar.png'"
							imageStyle="background:#f4f5f6;;width:164rpx;height:164rpx;border-radius:50%;">
						</qq-image>
						<image src="../../static/fgx/xiangji.png" style="
                width: 48rpx;
                height: 48rpx;
                bottom: 0;
                right: 0;
                position: absolute;
              "></image>
					</view>
					<view class="mt-20 fs-26 color-999999">上传头像</view>
				</view>
				<!-- 头像 -->

				<view class="userinfo-item flex-y-center">
					<view class="userinfo-title">昵 称</view>
					<input :adjust-position="false" placeholder="请输入昵称" type="text" v-model="form.name" />
				</view>

				<view class="userinfo-item">
					<view class="userinfo-title" style="align-items: flex-start">签 名</view>
					<textarea :adjust-position="false" placeholder="请输入签名" v-model="form.signature"
						:auto-height="true"></textarea>
				</view>

				<view class="userinfo-item flex-y-center flex-x-b">
					<view class="userinfo-title">性 别</view>
					<div class="flex flex-y-center">
						<view @tap.stop="choose_sex(1)" class="gender" :class="form.gender == 1 ? 'active-gender' : ''">
							男
						</view>
						<view @tap.stop="choose_sex(2)" class="gender" :class="form.gender == 2 ? 'active-gender' : ''">
							女
						</view>
					</div>
				</view>

				<view class="userinfo-item flex-y-center flex-x-b" @tap.stop="chooseCategory">
					<view class="userinfo-title">添加好友设置</view>
					<!-- <uni-section title="添加好友设置">
						<uni-data-select v-model="form.AllowType" :localdata="AllowType"
							@change="change"></uni-data-select>
					</uni-section> -->

					<view class="userinfo-title_haoy" :class="AllowTypeval ? 'active' : ''">
						{{ AllowTypeval || "添加好友设置" }}
					</view>
					<view class="iconfont icon-xiangyou1"></view>
				</view>

				<view @tap.stop="toPage('/pages/user/invite')" class="userinfo-item flex-y-center flex-x-b">
					<view class="userinfo-title">二维码</view>
					<image src="../../static/my/code.png" style="width: 36rpx; height: 36rpx"></image>
				</view>
			</view>
		</view>

		<fixed-bottom height="200rpx" v-if="show_save">
			<view class="flex flex-x-y" style="padding-top: 20rpx; padding-bottom: 50rpx">
				<view class="default-btn" style="width: 550rpx" @tap.stop="save">保存</view>
			</view>
		</fixed-bottom>

		<powers ref="powers"></powers>
		<powers1 ref="powers1" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></powers1>

		<qq-select ref="qqSelect"></qq-select>
	</view>
</template>

<script>
	import powers1 from "@/components/powers/powers1.vue";

	let utils = require("../../utils/util");
	export default {
		components: {
			powers1,
		},
		data() {
			return {
				permissionID: "",
				form: {
					avatarUrl: "",
					name: "",
					signature: "",
					gender: "", //0-未知  1-男  2-女
					allowWay: "",
				},
				old_form: {},
				AllowType: [{
						AllowType_Type_NeedConfirm: "需要经过自己确认才能添加自己为好友",
					},
					{
						AllowType_Type_AllowAny: "允许任何人添加自己为好友",
					},
					{
						AllowType_Type_NeedConfirm: "不允许任何人添加自己为好友",
					},
				],
				AllowTypeval: "",
			};
		},
		computed: {
			show_save() {
				return JSON.stringify(this.form) != JSON.stringify(this.old_form);
			},
		},
		onLoad() {
			let {
				name,
				avatarUrl,
				signature,
				gender,
				allowWay
			} = this.user_info;
			this.form = {
				name,
				avatarUrl,
				signature,
				gender,
				allowWay,
			};
			this.old_form = this.clone(this.form);
			let allindex = this.getIndexByAllowWay(this.user_info.allowWay);
			this.AllowTypeval = this.getAllowTypeValue(allindex);
		},
		methods: {
			getIndexByAllowWay(allowWay) {
				for (let i = 0; i < this.AllowType.length; i++) {
					if (this.AllowType[i].hasOwnProperty(allowWay)) {
						return i;
					}
				}
				return -1;
			},
			getAllowTypeValue(index) {
				const item = this.AllowType[index];
				if (item) {
					if (item.AllowType_Type_NeedConfirm) {
						return item.AllowType_Type_NeedConfirm;
					} else if (item.AllowType_Type_AllowAny) {
						return item.AllowType_Type_AllowAny;
					} else if (item.AllowType_Type_NeedConfirm) {
						return item.AllowType_Type_NeedConfirm;
					}
				}

				return null;
			},
			getAllowTypeKey(index) {
				const item = this.AllowType[index];
				if (item) {
					const keys = Object.keys(item);
					if (keys.length > 0) {
						return keys[0];
					}
				}

				return null;
			},
			chooseCategory() {
				this.$refs.qqSelect.open(
					this.AllowType.map((item) => Object.values(item)[0]),
					-1,
					({
						index
					}) => {
						this.AllowTypeval = this.getAllowTypeValue(index);
						this.form.allowWay = this.getAllowTypeKey(index);
					}
				);
			},
			// 现在的
			choose_image(permissionID) {
				if (uni.getSystemInfoSync().platform == "ios") {
					this.$refs.powers.open({
						powersType: "POWERS_IMAGE",
						success: () => {
							////////////
							utils.upload_one((url) => {
								this.form.avatarUrl = url;
							});
							////////////
						},
					});
				} else {
					this.permissionID = permissionID;
					setTimeout(() => {
						this.$refs["powers1"].open();
					}, 500);
				}
			},
			//用户授权权限后的回调
			changeAuth() {
				// this.choose_image('WRITE_EXTERNAL_STORAGE')
				utils.upload_one((url) => {
					this.form.avatarUrl = url;
				});
				//这里是权限通过后执行自己的代码逻辑
				console.log("权限已授权，可执行自己的代码逻辑了");
			},
			// 原来的
			// choose_image1() {
			// 	this.$refs.powers.open({
			// 		powersType: 'POWERS_IMAGE',
			// 		success: () => {
			// 			////////////
			// 			utils.upload_one(url => {
			// 				this.form.avatarUrl = url;
			// 			});
			// 			////////////
			// 		}
			// 	});
			// },
			choose_sex(sex) {
				this.form.gender = sex;
			},
			save() {
				this.request({
					url: "/user/update",
					method: "POST",
					data: {
						...this.form,
					},
				}).then((res) => {
					if (res.status != 200) return;
					this.showToast("修改成功");
					this.$store.dispatch("refresh_user");
					this.old_form = this.clone(this.form);
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.userinfo-item {
		display: flex;
		/* align-items: center; */
		padding: 32rpx 0;
		border-bottom: 1px solid #e6e6e6;
		overflow: hidden;
		/* width: 100%; */
		/* width:400rpx; */
		width: 690rpx;
	}

	.userinfo-item+.userinfo-item {}

	.userinfo-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		width: 180rpx;
	}

	.userinfo-title_haoy {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		width: 450rpx;
	}

	.userinfo-item input {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}

	.userinfo-item textarea {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}

	.gender {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 168rpx;
		height: 72rpx;
		border-radius: 10rpx;
		border: 1px solid #999999;
		border-color: #999999;
		font-size: 28rpx;
		color: #333333;
		margin-right: 24rpx;
		transition: all 0.2s;
	}

	.active-gender {
		background-color: $bgColor;
		color: #ffffff;
		border-color: $bgColor;
	}
</style>